<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
                template="./../template/layout.xhtml">

    <ui:define name="title">
        #{taskBean.task.title}
    </ui:define>

    <ui:define name="content">
        <f:metadata>
            <f:event type="javax.faces.event.PreRenderComponentEvent" listener="#{taskBean.securityCheck}"/>
            <f:event type="javax.faces.event.PreRenderComponentEvent" listener="#{taskBean.consult()}"/>
        </f:metadata>
        <section class="task-details-page">
            <div class="top">
                <div class="col1">
                    <h2 class="no-overflow">#{taskBean.task.title}</h2>
                    <p>#{taskBean.task.description}</p>
                    <c:if test='#{taskBean.userRole == "ADMIN"}'>
                        <a href="#{request.contextPath}/faces/admin/close.xhtml?id=#{taskBean.task.id}" onclick="return confirm('ARE YOU SURE?');" class="button large finished green-hover">Mark as finished</a>
                    </c:if>
                </div>
                <div class="col2">
                    <h2>#{taskBean.task.deadlineStatus}</h2>
                    <h3>Contributors:</h3>
                    <img src="" title="#{taskBean.task.author.firstname} #{taskBean.task.author.lastname}" alt="#{taskBean.task.author.firstname} #{taskBean.task.author.lastname}" class="author" />
                    <ui:repeat var="contributor" value="#{taskBean.task.contributors}">
                        <img src="" title="#{contributor.firstname} #{contributor.lastname}" alt="#{contributor.firstname} #{contributor.lastname}" class="contributor" />
                    </ui:repeat>
                </div>
            </div>
            <hr/>
            <div  class="bottom">
                <div class="col1">
                    <div class="doc-list doc-list-header">
                        <h3>Associated documents</h3>
                    </div>
                    <div class="doc-list">
                        <c:choose>
                            <c:when test="#{documentBean.documents.size()>0}">
                                <ui:repeat var="d" value="#{documentBean.documents}">
                                    <div>
                                        <span class="new">#{d.newLabel}</span>
                                        <!--TODO-->
                                        <img src="" alt="Uploaded by #{d.upload.uploader.firstname} #{d.upload.uploader.lastname}" title="Uploaded by #{d.upload.uploader.firstname} #{d.upload.uploader.lastname}" class="user" />
                                        <h3>#{d.name}</h3>
                                        <span class="date">#{d.prettyCreationDate}</span>
                                        <a href="#{request.contextPath}/faces/user/download.xhtml?id=#{d.id}" class="download"></a>
                                    </div>
                                </ui:repeat>
                            </c:when>
                            <c:otherwise>
                                <p>No attached document.</p>
                            </c:otherwise>
                        </c:choose>
                    </div>
                    <c:if test="#{taskBean.task.finished}">
                        <div class="doc-upload">
                            <h2>ADD A DOCUMENT</h2>
                            <h:form id="form" enctype="multipart/form-data">
                                <img alt="download" src="#{request.contextPath}/resources/images/upload.png" />
                                <h:inputFile id="file" value="#{fileUploadBean.uploadedFile}" p:required="required" />
                                <input type="hidden" name="id" value="#{taskBean.task.id}" />
                                <!--<input type="hidden" name="taskId" value="# {taskBean.task.id}" />-->
                                <h:commandButton value="UPLOAD" class="button green-hover" action="#{fileUploadBean.upload}" />
                                <span class="error red">
                                    <h:message for="file" />
                                </span>
                            </h:form>
                        </div>
                    </c:if>
                    <div class="opinion">
                        <div class="doc-upload">
                            <h2>OPINION</h2>
                            <c:if test="#{taskBean.task.finished}">
                                <c:if test="#{opinionBean.alreadySubmitAnOpinion()}">
                                    <h:form enctype="multipart/form-data" id="opinion-add-form">
                                        <input type="hidden" value="#{taskBean.task.id}" name="id" />
                                        <img alt="upload" src="#{request.contextPath}/resources/images/upload.png" />
                                        <h:inputFile value="#{opinionBean.uploadedFileOpinion}" />
                                        <h:inputTextarea id="opinion-text" p:placeholder="Enter your feedback here..." value="#{opinionBean.opinionContent}" p:required="required" />
                                        <h:commandButton value="SUBMIT" class="button green-hover" action="#{opinionBean.save()}" />
                                        <span class="error red">
                                            <h:message for="opinion-text" />
                                        </span>
                                    </h:form>
                                </c:if>
                            </c:if>

                            <div class="opinion-list">
                                <c:choose>
                                    <c:when test="#{opinionBean.opinions.size() > 0}">
                                        <ui:repeat var="o" value="#{opinionBean.opinions}">
                                            <div class="opinion-render">
                                                <span class="new">#{o.newLabel}</span>
                                                <p>
                                                    Opinion ##{o.id}:
                                                    #{o.comment}
                                                </p>
                                                <div class="details">
                                                    <img src="" alt="Uploaded by #{o.user.firstname} #{o.user.lastname}" title="Uploaded by #{o.user.firstname} #{o.user.lastname}" class="user" />
                                                    <span class="date no-overflow">#{o.prettyCreationDate}</span>
                                                    <span class="attachment #{o.hasAttachment}">
                                                        <h3 class="no-overflow" onclick="this.parentNode.childNodes[3].click()"><span>Attachment: </span>#{o.document.name}</h3>
                                                        <a href="#{request.contextPath}/faces/user/download.xhtml?id=#{o.document.id}" class="download"></a>
                                                    </span>
                                                </div>
                                            </div>
                                        </ui:repeat>
                                    </c:when>
                                    <c:otherwise>
                                        <p class="empty">No opinion found for this task.</p>
                                    </c:otherwise>
                                </c:choose>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col2">
                    <div class="comments">
                        <c:if test="#{taskBean.task.finished}">
                            <h:form enctype="multipart/form-data" id="message-add-form">
                                <input type="hidden" value="#{taskBean.task.id}" name="id" />
                                <h:inputTextarea id="message-text" p:placeholder="Enter your comment..." class="text" value="#{messageBean.comment}" p:required="required" />
                                <h:commandButton value="SUBMIT" class="button green-hover" action="#{messageBean.save()}" />
                                <span class="error red">
                                    <h:message for="message-text" />
                                </span>
                            </h:form>
                        </c:if>
                        <c:choose>
                            <c:when test="#{messageBean.messages.size() > 0}">
                                <ui:repeat var="m" value="#{messageBean.messages}">
                                    <div class="message#{m.expand}">
                                        <div class="line1">
                                            <img src="" alt="" class="picture"/>
                                            <h4 class="text no-overflow">#{m.user.firstname} #{m.user.lastname}</h4>
                                            <span class="date no-overflow">#{m.prettyCreationDate}</span>
                                        </div>
                                        <div class="line2">
                                            <span class="new picture">#{m.newLabel}</span>
                                            <p class="text">#{m.content}</p>
                                        </div>
                                    </div>
                                </ui:repeat>
                            </c:when>
                            <c:otherwise>
                                <p>No message found for this task</p>
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
            </div>
        </section>
    </ui:define>
</ui:composition>
